<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Admin panel developed with the Bootstrap from Twitter.">
    <meta name="author" content="travis">
    <link rel="icon" href="images/leaf.ico" type="image/x-icon" />
</head>
<body>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/ugallery.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="layui/layui.js"></script>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="gallery">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
            预览图：
            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
        </blockquote>
    </div>
    <script>
        layui.use(['upload', 'layer'], function () {
            let upload = layui.upload;
            let layer = layui.layer;
            upload.render({
                elem: '#gallery'
                ,url: ''
                ,multiple: true
                ,before: function(obj){
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    //上传完毕
                    $('#uploader-list').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                        '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
                        '<div class="info">' + res.data.title + '</div>' +
                        '</div>'
                    );
                }
            });
        })    
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });
        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            $(this).parent().remove();  
        });     
    </script>

</body>    
</html>
